<template>
  <div class="wrap">
    <h3>
      <span>地址管理</span>
      <router-link to="/addaddress">
        <button class="btn">添加新地址</button>
      </router-link>
    </h3>
    <ul>
      <li>
        <span class="span">收货人姓名 :</span>
        <input class="inp1" v-model="name" type="text">
      </li>
      <li class="clearfix">
        <span class="span flo">所在地区 :</span>
        <City  v-model="cityInfo" class="select-city" @input="chooseAddress"></City>
      </li>
      <li>
        <span class="span">详细地址 :</span>
        <input class="inp2" type="text" v-model="street">
      </li>
      <li>
        <span class="span">联系电话 :</span>
        <input class="inp3" type="text" v-model="phone">
        <span class="span1">或固定电话 :</span>
        <input class="inp4" type="text" v-model="tel1">-<input class="inp5" type="text" v-model="tel2">
      </li>
    </ul>

    <div class="default">
      <img src="../../../static/zwf/mine/false.png" v-if="show" @click="change()"/>
      <img src="../../../static/zwf/mine/true.png" v-else @click="change()"/>
      <span>设置为常用地址</span>
    </div>
    <button class="btn1" @click="save()">保存</button>
  </div>
</template>

<script>
  import axios from 'axios'
  import City from './City'
    export default {
      name: "Addaddress",
      data() {
        return {
          show: true,
          cityInfo: {
            province: '河南省',
            city: '郑州市',
            block: '高新区'
          },
          name: '',
          street: '',
          phone: '',
          isdefault: 0,
          tel1: '',
          tel2: '',
          uid:'',
          cityInfo:''
        }
      },
      components: {
        City
      },
      methods: {
        change() {
          this.show = !this.show;
        },
        // info 为子组件传递过来的参数
        chooseAddress(info) {
          // console.log('info', info)
          this.cityInfo = info
        },
        save() {
          if(this.name.trim()==''){
            alert('收货人不能为空');
            return false;
          }
          if(this.cityInfo==''){
            alert('地址不能为空');
            return false;
          }
          if(this.street.trim()==''){
            alert('详细地址不能为空');
            return false;
          }
          if(this.phone.trim()==''){
            alert('联系电话不能为空');
            return false;
          }else{
            var params = new URLSearchParams();
            params.append('uid', this.uid);
            params.append('name', this.name);
            params.append('region', this.cityName);
            params.append('street', this.street);
            params.append('isdefault', this.isdefault);
            params.append('phone', this.phone);
            params.append('tel', this.tel1 + '-' + this.tel2);
            axios.post('/api/firday/address/add.php', params).then(res => {
              alert(res.data);
              this.$router.go(-1);

            })
          }

        },
      },
      computed:{
        //cityName 为选择的省市区名称
        cityName(){
          const names = [];
          this.cityInfo.province && (this.cityInfo.province.name != undefined && names.push(this.cityInfo.province.name + ' '));
          this.cityInfo.city && (this.cityInfo.city.name != undefined && names.push(this.cityInfo.city.name + ' '));
          this.cityInfo.block && (this.cityInfo.block.name != undefined && names.push(this.cityInfo.block.name + ' '));
          return names.join('');
        }
      },
      mounted(){
        var params=new URLSearchParams();
        params.append('iphone',this.$store.state.phone);

        axios.post('/api/firday/userinfo.php',params).then(res=>{

          var arr1=res.data;
          console.log(arr1);
          this.uid=arr1[0].user_id;
        })
      }
    }
</script>

<style scoped>
  .wrap{
    width: 1083px;
    height: 623px;
    border: 1px solid #e7e7e7;
  }
  .wrap h3{
    width: 1043px;
    height: 56px;
    line-height: 56px;
    padding:0 20px;
    border-bottom: 1px solid #e7e7e7;
  }
  .wrap h3 span{
    float: left;
    font-size: 18px;
    color: #212121;
  }
  .wrap h3 .btn{
    float: right;
    background: #498e3d;
    color: #fff;
    width: 90px;
    height: 30px;
    margin-top: 14px;
    border-radius: 5px;
    cursor: pointer;
  }
  ul{
    width: 1083px;
    padding-top: 40px;
  }
  li {
    margin-bottom: 20px;
  }
  li span{
    font-size: 16px;
    color: #333333;
  }

  li .span{
    display: inline-block;
    width: 150px;
    height: 33px;
    text-align: right;
    margin-right: 20px;
  }
  li .span1{
    display: inline-block;
    width: 100px;
    height: 33px;
    text-align: center;
  }
  li .span:before{
    content: "*";
    color: #ec6a17;
    margin-right: 5px;
    vertical-align: middle;
  }
  li .flo{
    float: left;
    line-height: 33px;
    margin-right: 23px;
  }
  li input{
    width: 329px;
    height: 33px;
    border: 1px solid #d3d3d3;
    padding-left: 10px;
  }
  li .inp1{
    width: 320px;
  }
  li .inp2{
    width: 448px;
  }
  li .inp3{
    width: 140px;
  }
  li .inp4{
    width: 37px;
    margin-right: 11px;
  }
  li .inp5{
    width: 113px;
    margin-left: 11px;
  }
  .default img{
    vertical-align: bottom;
    margin-left: 170px;
    margin-right: 10px;
    cursor: pointer;
  }
  .default span{
    font-size: 16px;
    color: #333333;
  }

  .btn1{
    width: 150px;
    height: 50px;
    background: #f08200;
    font-size: 20px;
    color: #fff;
    margin-left: 170px;
    border-radius: 5px;
    margin-top: 40px;
    cursor: pointer;
  }
</style>
